<template>
    <div>
        <button @click="pdfFn">导出PDF</button>
        <img :src="url" class="img" />
        <div id="pdfDom" style="padding-top: 55px; background-color: #fff">
            <h1>vue HTML网页生成PDF格式</h1>
            <p>
                大概思路 => 就是将页面转换成图片格式 .然后通过图片的base64码
                生成PDF格式 保存到本地。
            </p>
            <div>
                <p>需要两个插件：</p>
                ​ npm install --save html2canvas<br />
                npm install jspdf --save
            </div>
            <br />
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            htmlTitle: "html导出PDF",
            url: "",
        };
    },
    methods: {
        async pdfFn() {
            console.log("点击");
            this.url = await this.getImage("pdfDom", this.htmlTitle);
            // this.getPdf("pdfDom", this.htmlTitle);//pdf
        },
    },
};
</script>

<style>
.cnt {
    height: 600px;
    background: #ccc;
    width: 800px;
    margin: auto;
}
.img {
    width: 800px;
    border: 1px solid #ccc;
    padding: 10px;
    display: block;
    margin: 10px auto;
}
</style>